<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap Responsive</title>

        <!-- Bootstrap -->
        <link href="css/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-3.2.0-dist/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
        <link href="css/bootstrap-3.2.0-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
        <script type="text/javascript" src="js/jquery.js"></script> 
        <script type="text/javascript" src="css/bootstrap-3.2.0-dist/js/bootstrap.js"></script> 
        <script type="text/javascript" src="css/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script> 
        <link href="css/responsive.css" rel="stylesheet" media="all">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" >
            $(function() {
                $('#carousel-speedy_market').carousel({
                    interval: 3000
                });
            });
        </script> 
    </head>
    <body>
        <header class="container">
            <div class="row">
                <div class="col-xs-3">
                    <img src="images/speedy-market.gif" alt=""> 
                </div>
                <div class=" col-xs-6">
                    <form>   
                        <label class="sr-only" for="exampleInputEmail2">Identifiant</label>
                        <input type="email" class="control_form" id="exampleInputEmail2"  placeholder="Identifiant">
                        <label class="sr-only "  for="exampleInputPassword2">Mot de passe</label>
                        <input type="password" class="control_form" id="exampleInputPassword2" placeholder="Mot de passe">
                        <button type="submit" class="glyphicon glyphicon-chevron-right coulverte"></button>
                        <br>
                        <input type="checkbox"> Identifiant oublié ?
                    </form> 
                    <img src="images/slogan.png" id="familly"  alt=""> 
                </div>
                <div class="col-xs-3">          
                    <img src="images/panier.gif" alt="" />
                </div>     
            </div>
        </header>
        <nav class="container">
            <div class="row">
                <ul>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/poissonnerie.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4 ">
                        <img src="images/surgeler.gif" alt="">
                    </li> 
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4 ">
                        <img src="images/boucherie.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/cremerie.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/boulangerie.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/epicerieSucre.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/epicerieSale.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/fruitsLegumes.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/conserves.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/boissons.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/soinsBeaute.gif" alt="">
                    </li>
                    <li class="col-lg-1 col-md-1 col-sm-3 col-xs-4">
                        <img src="images/interieur.gif" alt="">
                    </li>

                </ul>
            </div> 
        </nav>
        <div class="container">
            <div class=" col-xs-9">

            </div>   

            <div class=" col-xs-3">
                <section>
                    <input type="search" name="title" class="control_form" placeholder="Cherchez votre article" value>
                    <button type="submit" class="glyphicon glyphicon-search boutn_recherche"></button> 
                </section>
            </div>
        </div>

        <div class=" col-lg-12">

            <div id="carousel-speedy_market" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-speedy_market" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-speedy_market" data-slide-to="1"></li>
                    <li data-target="#carousel-speedy_market" data-slide-to="2"></li>
                    <li data-target="#carousel-speedy_market" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="slide/legumes.jpg"  alt="premier slide" /> 
                        <div class="carousel-caption">
                            <h2>Page Accueil</h2>
                            <p>Welcome to speedymarket</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="slide/pate.jpg"  alt="deuxieme slide" /> 
                        <div class="carousel-caption">
                            <h2>Page Recette</h2>
                            <p>Une bonne pate le weekend</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="slide/lasagne.jpg"  alt="troisieme slide" /> 
                        <div class="carousel-caption">
                            <h2>Page Idées plat du jour</h2>
                            <p>De la bonne lasagne</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="slide/salade.jpg"  alt="quatrieme slide" /> 
                        <div class="carousel-caption">
                            <h2>Page Idées plat du jour</h2>
                            <p>Une bonne salade du sud </p>
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carousel-speedy_market" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-speedy_market" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>
        </div>
        <div class="container" style="margin-top: 20px">
           <div class="col-xs-2">
               <a href="Paiement_Sécurisés.html"><img src="images/paiment.png" alt=""></a>
            </div> 
             <div class="col-xs-2">
                 <a href="Service_de_qualité.html"><img src="images/service.png" alt=""></a>
            </div>
             <div class="col-xs-2">
                 <a href="Satisfait_ou_remboursé.html"><img src="images/satisfait.png" alt=""></a>
            </div>
             <div class="col-xs-2">
                 <a href="Prix_bas.html"><img src="images/prix_bas.png" alt=""></a>
            </div>
             <div class="col-xs-4">
                 <img src="images/email.gif" style="margin-top: 5px" alt="" />  
                <form class="form-inline" role="form">

                    <label class="sr-only" for="exampleInputEmail2">Identifiant</label>
                    <input type="email"  id="exampleInputEmail" class="control_form" placeholder="Email">
                    <input type="submit"  name="inscription" class="coulverte" value="S'inscrire">

                </form>
            </div>
            
            
        </div>
        <footer class="container" style="margin-top: 20px">
            <div class="col-xs-4">
           
            </div>
            <div class="col-xs-5">
               
                <a href="mentions.html" style="color: #33cc00">Mentions spéciales </a>
                    &nbsp;&nbsp;
                    <a href="plansite.html" style="color: #33cc00"> Plan du site</a>
              
            </div>
            	
        </footer>






    </body>
</html>
